<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-27 15:24:27
 * @LastEditors: 47
 * @LastEditTime: 2023-01-05 21:32:31
-->
<template>
  <div class="startexam">

     <!-- 课程名 -->
     <van-nav-bar
      title="考试"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="exam-content">

      <!-- 姓名学号 -->
      <span class="name">姓名：柴新宇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学号：20191611442</span>
      
      <!-- 表格-->
      <table class="table">
        <tr>
          <td class="property">考试名称</td>
          <td class="property-value">
            {{testDetailObj.test_title}}
            <!-- 2022年秋季学期形式与政策课期末考核作业 -->
            </td>
        </tr>
        <tr>
          <td class="property">答题时长</td>
          <td class="property-value">
            120分钟
            </td>
        </tr>
        <tr>
          <td class="property">考试名称</td>
          <td class="property-value">
            <!-- 12-14 12:13  -->
            {{testDetailObj.test_start_time}}
            至
             <!-- 02-10 23:00 -->
             {{testDetailObj.test_end_time}}
            
            </td>
        </tr>
      </table>

      <!-- 题目个数 -->
      <div class="topic-num">本试卷共包含1道题目</div>

      <!-- 考试说明 -->
      <div class="exam-explain">

        <div class="explain-title">考试说明：</div>

        <div class="explain-content">
          <span>1、请不要中途离开考试界面，离开或退出考试界面会继续计时，离开或退出考试界面会继续计时。</span>
          <span>2、请不要中途离开考试界面，离开或退出考试界面会继续计时，离开或退出考试界面会继续计时。</span>
          <span>3、请不要中途离开考试界面，离开或退出考试界面会继续计时，离开或退出考试界面会继续计时。</span>
          <span>4、请不要中途离开考试界面，离开或退出考试界面会继续计时，离开或退出考试界面会继续计时。</span>
        </div>
      </div>

      <!-- 复选框 -->
      <div class="checked">
        <van-checkbox v-model="checked" shape="square">我已经阅读并同意</van-checkbox>
      </div>

      <!-- 开始考试 -->
      <button :class="{btn:checked==true,'unChecked-btn':checked==false}" @click="goExaming" :disabled="checked==false">开始考试</button>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 引入vant
import { NavBar,Checkbox} from 'vant';

// 引入路由
import {useRouter,useRoute} from 'vue-router'

// 引入仓库
import { useCourseStore } from '@/stores/course'
import { onMounted } from '@vue/runtime-core'
import { storeToRefs } from 'pinia'
//实例化仓库对象
const course = useCourseStore()
//解构方法
const { getCourseTestDetail } = course
//解构数据(如果想要处理响应式数据，使用storeToRefs)
const { testDetailObj } = storeToRefs(course)

// 创建路由对象
const router = useRouter()
const route = useRoute()

const testId =  route.params.testId
onMounted(() => {
  getCourseTestDetail(testId)
})



// 复选框选中或者未选中
const checked = ref(true);

// 点击左侧箭头返回上一页
const onClickLeft = () => history.back();

// 跳转到开始考试页面
const goExaming = () => {
    router.push({
      name:'examing',
      params:{
        testId
      }
    })
}
</script>

<style lang="less" scoped>

.startexam{
  :deep(.van-icon) {
    color: black;
  }

  .exam-content{
    display: flex;
    flex-flow: column;
    padding: 15px;
    // width: 355px;

    .name{
      background-color: #fafafa;
      padding: 15px;
      color: #afafaf;
      margin-bottom: 25px;
    }

    .table,
    td,
    th {
        font-size: 13px;
        border: 1px solid #f1f1f1;
        border-collapse: collapse;
        text-align: center;
        padding: 15px;
    }
    
    .table{

      .property{
        width: 75px;
      }

      .property-value{
        width: 200px;
      }
    }

    .topic-num{
      color: #afafaf;
      padding: 20px 0;
    }

    .exam-explain{

      .explain-title{
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 10px;
      }

      .explain-content{
        display: flex;
        flex-flow: column;

        span{
          margin-bottom: 10px;
          color: #bcbcbc;
        }
      }

    }

    .checked{
      display: flex;
      flex-flow: row;
      justify-content: center;
      margin: 10px 0 20px;
      font-size: 13px;
      :deep(.van-icon) {
        color: #ffffff;
      }
    }

    .unChecked-btn,
    .btn{
      padding: 8px 0;
      margin-left: 15px;
      width: 90%;
      font-size: 13px;
      color: #ffffff;
      border: 1px solid transparent;
      border-radius: 5px;
    }

    .unChecked-btn{
      background-color: #97d6ff;

    }

    .btn{
      background-color: #0199fe;
    }
  }
}
</style>
